<!--
 * createor: zc
 * email: zc8023zs@163.com
 * create_time: 2020/3/14 13:46:24
 *-->
<template>
  <el-container>
    <el-header style="margin:20px 10px 0 10px;height:auto">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="栏目id：">
          <treeselect style="width:200px"
            :options="class_idQueryCascaderData"
            :default-expand-level="3" :flatten-search-results="true"
            v-model="listQuery.class_id"
            placeholder=""
            :normalizer="class_idQueryNormalizer"
          />
        </el-form-item>
        <el-form-item label="标题:">
          <el-input v-model="listQuery.title" clearable="clearable" maxlength="255"></el-input>
        </el-form-item> 
        <el-form-item label="内容模型：">
            <el-select v-model="listQuery.model_type" clearable="clearable" placeholder="请选择">
                <el-option
                  v-for="item in model_typeQuerySelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="状态：">
            <el-select v-model="listQuery.status" clearable="clearable" placeholder="请选择">
                <el-option
                  v-for="item in statusQuerySelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="创建时间：">
            <el-date-picker v-model="listQuery.create_times" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" clearable="clearable" value-format="yyyy/M/d"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-dropdown split-button type="primary" @click="onSearch" @command="onSearch" :loading="tabLoading">
            <i class="el-icon-search el-icon--left"></i>{{$t('table.search')}}
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command='all'>查询全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" icon="el-icon-edit" @click="onAdd">{{$t('table.add')}}</el-button>
        </el-form-item> 
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :key="tableKey"
        :data="listData" :height="tableHeight"
        highlight-current-row border fit
        v-loading="tabLoading"
      >
        <el-table-column type="index" label=" " width="50" align="center" :index="table_index"></el-table-column>
        <el-table-column prop="class_id" label="栏目id" width="120" align="center" />
        <el-table-column prop="title" label="标题" width="120" align="center" />
        <el-table-column prop="model_type" label="内容模型" width="120" align="center" :formatter="commentFormat" />
        <el-table-column prop="status" label="状态" width="120" align="center" :formatter="commentFormat" />
        <el-table-column prop="create_time" label="创建时间" width="120" align="center" :formatter="dateFormat"/>
        <el-table-column prop="release_time" label="发布时间" width="120" align="center" :formatter="dateFormat"/>
        <el-table-column prop="sort" label="排序" width="120" align="center" />
        <el-table-column prop="top_type" label="置顶方式" width="120" align="center" :formatter="commentFormat" />
        <el-table-column prop="create_user_id" label="创建人id" width="120" align="center" />
        <el-table-column prop="create_user" label="创建人名称" width="120" align="center" />
        <el-table-column prop="secret_level" label="保密级别" width="120" align="center" :formatter="commentFormat" />
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="150"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-dropdown @command="onInfoPages">
              <span class="el-dropdown-link">
                <i class="el-icon-s-tools el-icon--left"></i>功能操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-edit" :command="{a:scope,b:'editarticle'}">{{$t('table.edit')}}</el-dropdown-item> 
                <el-dropdown-item icon="el-icon-search" :command="{a:scope,b:'info'}">{{$t('table.info')}}</el-dropdown-item> 
                <el-dropdown-item icon="el-icon-delete" :command="{a:scope,b:'delete'}">{{$t('table.delete')}}</el-dropdown-item> 
                <el-dropdown-item icon="el-icon-edit" :command="{a:scope,b:'editarticle_ex'}">{{$t('table.edit')}}内容扩展</el-dropdown-item> 
                <el-dropdown-item icon="el-icon-edit" :command="{a:scope,b:'editarticle_model_1'}">{{$t('table.edit')}}内容_模型_新闻</el-dropdown-item> 
                <el-dropdown-item icon="el-icon-edit" :command="{a:scope,b:'editarticle_model_2'}">{{$t('table.edit')}}内容_模型_视频</el-dropdown-item> 
                <el-dropdown-item icon="el-icon-edit" :command="{a:scope,b:'editarticle_model_3'}">{{$t('table.edit')}}内容_模型_文库</el-dropdown-item> 
                <el-dropdown-item icon="el-icon-edit" :command="{a:scope,b:'editarticle_model_4'}">{{$t('table.edit')}}内容_模型_图片</el-dropdown-item> 
                <el-dropdown-item icon="el-icon-edit" :command="{a:scope,b:'editarticle_model_5'}">{{$t('table.edit')}}内容_模型_下载</el-dropdown-item> 
                <el-dropdown-item icon="el-icon-edit" :command="{a:scope,b:'editarticle_model_6'}">{{$t('table.edit')}}内容_模型_文章</el-dropdown-item> 
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="pagecnt>1"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.size"
        @pagination="getList"
      />
    </el-main>
  </el-container>
</template>
<style scoped>
body .app-container .el-container,
body .app-container .el-header,
body .app-container .el-main,
body .el-container,
body .el-header,
body .el-main {
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
<script>
import Pagination from "@/components/Pagination";
import { Loading } from "element-ui";
import {
  articleSelecttree,
  articleSelectpage,
  articleSelect,
  articleAdd,
  articleUpdate,
  articleDel,
  articleInfo
} from '@/api/project/article/project_article_article'
import {
  article_classSelect,article_classSelecttree,article_classSelectpage
} from '@/api/project/article/project_article_article_class'
import treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "a_articlea_article",
  components: { Pagination,treeselect, },
  filters: {},
  data() {
    return {
      dialogTitle: `内容管理编辑`,
      delLoading: false,
      tabLoading: false,
      dialogFormVisible: false,
      tableKey: 'article_article_table',
      listData: null,
      total: 0,
      pagecnt: 0,
      tableHeight: (window.innerHeight-210),
      listQuery: {
        page: 1,
        size: 20,
        class_id: null, 
        title: null, 
        model_type: null, 
        status: null, 
        create_times: null, 
      },
      class_idQueryCascaderData: [
      ],
      model_typeQuerySelectData: [
        {value: 1,label: '新闻'},
        {value: 2,label: '视频'},
        {value: 3,label: '文库'},
        {value: 4,label: '图片'},
        {value: 5,label: '下载'},
        {value: 6,label: '文章'},
      ],
      statusQuerySelectData: [
        {value: 1,label: '初稿'},
        {value: 2,label: '发布'},
        {value: 3,label: '已审核'},
        {value: 4,label: '流转中'},
        {value: 5,label: '驳回'},
        {value: 6,label: '草稿'},
        {value: 7,label: '下线'},
      ],
    };
  },
  activated(){
    this.getList();
  },
  mounted(){
    let that =this;
    window.onresize=()=>{
      this.tableHeight = (window.innerHeight-210);
    }
  },
  created() {
    this.getList();
    this.class_idQueryCascaderDataList();
  },
  methods: {
    class_idQueryCascaderDataList(queryString,cb){
        article_classSelecttree().then(r=>{
            this.class_idQueryCascaderData = r.dataArray.dataList;
        })
    },
      class_idQueryNormalizer(node){
        if (node.children == undefined || node.children == null || node.children.length==0) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.class_name,
          children: node.children
        };
      },
    onSearch(command){
      if(command && command=='all'){
        this.resetQuery();
      }
      this.listQuery.page=1;
      this.getList();
    },
    onInfoPage(scope){
      var view = this.$store.state.permission.routesMap["/article/article_info"];
      this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:scope.row.id} })
    },
    onInfoPages(commend){
      if(commend.b=='editarticle'){
            var view = this.$store.state.permission.routesMap["/article/article_edit"];
            this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:commend.a.row.id} })
        return false;
      };
      if(commend.b=='info')this.onInfoPage(commend.a);
      if(commend.b=='delete')this.onDel(commend.a);
      if(commend.b=='editarticle_ex'){
        var view = this.$store.state.permission.routesMap["/article/article_ex_edit"];
        this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:commend.a.row.id} })
      }
      if(commend.b=='editarticle_model_1'){
        var view = this.$store.state.permission.routesMap["/article/article_model_1_edit"];
        this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:commend.a.row.id} })
      }
      if(commend.b=='editarticle_model_2'){
        var view = this.$store.state.permission.routesMap["/article/article_model_2_edit"];
        this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:commend.a.row.id} })
      }
      if(commend.b=='editarticle_model_3'){
        var view = this.$store.state.permission.routesMap["/article/article_model_3_edit"];
        this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:commend.a.row.id} })
      }
      if(commend.b=='editarticle_model_4'){
        var view = this.$store.state.permission.routesMap["/article/article_model_4_edit"];
        this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:commend.a.row.id} })
      }
      if(commend.b=='editarticle_model_5'){
        var view = this.$store.state.permission.routesMap["/article/article_model_5_edit"];
        this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:commend.a.row.id} })
      }
      if(commend.b=='editarticle_model_6'){
        var view = this.$store.state.permission.routesMap["/article/article_model_6_edit"];
        this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:commend.a.row.id} })
      }
    },
    resetQuery(){
      this.listQuery = {
        page: 1,
        size: 20,
        class_id: null, 
        title: null, 
        model_type: null, 
        status: null, 
        create_times: null, 
      }
    },
    onAdd(){
      var view = this.$store.state.permission.routesMap["/article/article_edit"];
      this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:0}})
    },
    onDel(data){
        var that = this;
        this.$confirm('确定删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            articleDel(that.$qs.stringify({id:data.row.id})).then(r=>{
                that.getList();
                that.curdAction = '';
                that.delLoading  = false;
                that.$notify({
                    message:"删除成功",
                    type: "success"
                });
            }); 
        }).catch(() => {
            this.$notify({
                message: "已取消删除",
                type: "info"
            }); 
        });
    },
    dateFormat(row, column, cellValue, index){
      return this.$moment(cellValue).format("YYYY/MM/DD");
    }, 
    commentFormat(row, column, cellValue, index){
      try {
        var comment = "";
        if(column.property=='model_type'){
          comment='内容模型:新闻=1 视频=2 文库=3 图片=4 下载=5 文章=6';
        }
        if(column.property=='status'){
          comment='状态:初稿=1 发布=2 已审核=3 流转中=4 驳回=5 草稿=6 下线=7';
        }
        if(column.property=='top_type'){
          comment='置顶方式:首页=1 栏目焦点=2';
        }
        if(column.property=='secret_level'){
          comment='保密级别:公开=1';
        }
        var array = comment.split(':')[1].split(' ');
        var obj = {};
        for(var i=0;i<array.length;i++){
          var split = array[i].split('=');
          obj[split[1]]=split[0];
        }
        if(obj[cellValue]) return obj[cellValue];
        return cellValue;
      } catch (error) {
        return cellValue;
      }
    },
    table_index(index) {
      return (this.listQuery.page - 1) * this.listQuery.size + index + 1;
    },
    getList() {
      this.tabLoading=true;
      articleSelectpage(this.$qs.stringify(this.listQuery,{ indices: false })).then(r=>{
        this.listData = r.dataArray.dataList;
        this.total = r.dataArray.dataCount;
        this.pagecnt = r.dataArray.pageCount;
        this.tabLoading=false;
      }).catch(()=>{
        this.tabLoading=false;
      });
    }
  }
};
</script>